<template>
  <div>
    <a-modal v-model="visible" title="批量启用" width="650px" centered @cancel="cancel" :confirmLoading="btnLoading" okText="验证" @ok="handleOk">
      <a-form-model :model="queryParams" :rules="rules" :labelCol="{ style: 'width: 78px' }" ref="form"
        class="ant-advanced-form">
        <a-form-model-item label="设备编码" prop="numberType" :colon="false" style="margin-bottom: 20px;">
          <a-radio-group v-model="queryParams.numberType">
            <a-radio :value="2">
              停用编码
            </a-radio>
            <a-radio :value="1">
              设备编号
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="queryParams.numberType===1" label="设备编码" prop="deviceNoStr" :colon="false" style="margin-bottom: 0;">
          <p style="font-size: 12px;margin: 0;"><a-icon type="info-circle"
              style="margin-right: 6px;" />最少输入1个设备号，多个设备号请用英文分号“;”隔开</p>
          <a-input type="textarea" v-model.trim="queryParams.deviceNoStr" :rows="6" style="width:510px;"
            placeholder="请输入设备编号(如8600000000000001;8600000000000002)"></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="queryParams.numberType===2" label="停用编号" prop="deactivateNo" :colon="false" style="margin-bottom: 20px;">
          <a-input v-model="queryParams.deactivateNo" style="width:300px" maxLength="6" placeholder="请输入停用编号"></a-input>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
    <a-modal v-model="visible_next" title="批量启用" width="650px" centered @cancel="cancel" @ok="handleOk">

      <div style="display: flex;align-items: center;font-size: 16px;margin-bottom: 16px;">
        <img style="width:22px;height:22px;margin-right: 10px;" src="../../../assets/img/icon_success.png"
          alt="">
        可启用设备编号：{{ data.availableDeviceList&&data.availableDeviceList.length||'0' }}
      </div>
      <div style="display: flex;align-items: center;font-size: 16px;margin-bottom: 16px;">
        <img style="width:22px;height:22px;margin-right: 10px;" src="../../../assets/img/icon_error.png" alt="">
        不可启用设备编号：{{data.unAvailableDeviceList&&data.unAvailableDeviceList.length||'0' }}
      </div>
      <div style="font-size: 14px;color: #606266;padding-left: 44px;">
        {{
          data.unAvailableDeviceList&&data.unAvailableDeviceList.join(';')
        }}
      </div>
      <div slot="footer">

        <a-button style="margin-right: 12px;" @click="deleteCantel">取消</a-button>
        <a-button type="primary" ghost style="margin-right: 12px;" @click="back">
          上一步
        </a-button>
        <a-button type="primary" @click="conffrimDetele">
          确定启用
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { verifySomeDecviceNo, operateSomeDecviceNo } from '@/services/operating'
export default {
  data () {
    return {
      btnLoading: false,
      visible: false,
      visible_next: false,
      queryParams: {
        operate: 2,
        numberType: 2
      },
      data: {
        availableDeviceList: [],
        unAvailableDeviceList: []
      },
      rules: {
        deviceNoStr: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
        numberType: [{ required: true }],
        deactivateNo: [{ required: true, message: '请输入停用编号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    cancel () {
      this.visible = false
      this.$refs.form.clearValidate()
      delete this.queryParams.deviceNoStr
      delete this.queryParams.deactivateNo
      this.$emit('getList')
    },
    back () {
      this.visible_next = false
    },
    deleteCantel () {
      this.visible = false
      this.visible_next = false
      this.$refs.form.clearValidate()
    },
    // 提交
    conffrimDetele () {
      this._operateSomeDecviceNo()
    },
    async _operateSomeDecviceNo () {
      const res = await operateSomeDecviceNo({ operate: 2, deactivateNo: this.queryParams.deactivateNo, numberType: this.queryParams.numberType, deviceNoStr: this.data.availableDeviceList.join(';') })
      if (res.isSuccess) {
        this.$message.newFun('批量操作成功!', 'success', 3)
        this.cancel()
        this.visible_next = false
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    // 验证接口
    async _verifySomeDecviceNo () {
      this.btnLoading = true
      const res = await verifySomeDecviceNo(this.queryParams)
      if (res.isSuccess) {
        this.data = res.data
        this.btnLoading = false
        this.visible_next = true
        console.log(this.data)
      } else {
        this.$message.newFun(res.msg, 'error', 3)
        this.btnLoading = false
      }
    },
    // 869090909090909;861234590909090;861000000000082;861000000000081
    // 验证
    handleOk () {
      this._verifySomeDecviceNo()
    }
  }
}
</script>
<style></style>
